<template>
    <el-dialog
      :show-close="false"
      v-model="centerDialogVisible"
      center
      align-center
      class="mine-week-diaolog-container"
    >
      <template #header>
        <slot name="title"></slot>
      </template>
      <div class="confirm-diaolog-content">
        <slot> </slot>
      </div>
  
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleConfirm"> {{ props.buttonText }} </el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  <script lang="ts" setup>
  import { ref, defineExpose, defineEmits } from "vue";
  
  const props = defineProps({
    buttonText: {
      type: String,
      default: "前往充值",
    },
  });
  const emit = defineEmits(["confirm"]);
  const centerDialogVisible = ref(false);
  const settingVisible = (flag = true) => {
    centerDialogVisible.value = flag;
  };
  const handleConfirm = () => {
    emit("confirm");
  };
  defineExpose({
    settingVisible,
  });
  </script>
  <style lang="scss">
  .mine-week-diaolog-container {
    padding: 20px !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #606166 !important;
    line-height: 24px !important;
    text-align: center !important;
    width: 464px !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    box-shadow: 3px 6px 12px 1px rgba(8, 52, 128, 0.08) !important;
    border-radius: 12px !important;
    .confirm-diaolog-content {
      width: 100%;
      font-weight: 400;
      font-size: 14px;
      color: #606166;
      line-height: 24px;
      text-align: left;
    }
    .el-button {
      border: none;
      background: none;
      font-weight: bold;
  font-size: 14px;
  color: #2E2F33;
    }
    .el-button--primary {
      box-shadow: 1px 2px 4px 1px rgba(69, 96, 230, 0.24);
      border-radius: 8px 8px 8px 8px;
      border: 2px solid #4560e6;
      color: #4560E6;
    }
  }
  </style>
  